<template>
	<view class="mons" v-if='data != null'>
		<view class="top">
			<view class="mo">
				<view class="head">
					<image :src="data.oOrderDetails[0].DefaultImage" mode="widthFix"></image>
				</view>
				<view class="name">
					{{data.oOrderDetails[0].cProductName}}等{{data.oOrderDetails.length}}件
				</view>
				<view class="msg" v-if='wul != null'>
					<view class="p">
						{{wul.com}}
						<view>
							配送企业：{{wul.corp_name}}
						</view>
					</view>
					<view class="p">
						快递单号：{{wul.nu}}
						<view>
							操作员：{{wul.by}}
						</view>
					</view>
				</view>
			</view>

			<!-- 小程序头部兼容 -->
			<!-- #ifdef MP -->
			<image class="bac" src="../../static/img/3/ppbac.png"></image>
			<!-- #endif -->
		</view>
		<view class="bottom" v-if="DE">
			<!-- 	<view class="tiam">
				<view class="tgbox">
					<view class="tg active">
						<view class="names">
							<text>已发货</text>
							<image src="../../static/img/3/3-72.png" mode="widthFix"></image>
						</view>
						<view class="d"></view>
						昆明市
					</view>
					<view class="tg">
						<view class="names">
							<text>运输中</text>
							<image src="../../static/img/3/3-72.png" mode="widthFix"></image>
						</view>
						<view class="d"></view>
					</view>
					<view class="tg">
						<view class="names">
							<text>派件中</text>
							<image src="../../static/img/3/3-72.png" mode="widthFix"></image>
						</view>
						<view class="d"></view>
					</view>
					<view class="tg">
						<view class="names">
							<text>已签收</text>
							<image src="../../static/img/3/3-72.png" mode="widthFix"></image>
						</view>
						<view class="d"></view>
						北京市
					</view>
					<view class="x"></view>
				</view>
			</view>
			 -->
			<view class="arrs">
				<view class="alb">
					<view class="xs"></view>
					<!-- 		<view class="arl">
						<text>收</text>
						 <view class="nse">
							云南省昆明市官渡区世纪城108号云南省昆明市官渡区世纪城108号
						</view>
					</view> -->
					<view class="arl" v-for='l in wul.data' v-if='wul != null' :key="l.time">
						<text class="ds"></text>
						<view class="nse">
							{{l.context}}
							<view class="ltime">
								{{l.time}}
							</view>
						</view>
					</view>
					<!-- <view class="arl">
						<text>寄</text>
						<view class="nse">
							云南省昆明市官渡区世纪城108号
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<web-view v-if="!DE" class="webview" :src="orderUrl"></web-view>

	</view>
</template>

<script>
	export default {
		name: "",
		components: {

		},
		data() {
			return {
				wul: null,
				data: null,
				orderUrl: '',
				DE:true
			}
		},
		onLoad(options) {
			var that = this;
			that.$Request.post(
				that.$api.httpApi.user.oderPay + '&token=' + that.$SysCache.get('token'), {
					cOrderNo: options.id
				}
			).then(res => {
				console.log(res.data)
				if (res.code == 200) {
					that.data = res.data;
				}
			});
			that.$Request.post(
				that.$api.httpApi.user.wuliu + '&token=' + that.$SysCache.get('token'), {
					cOrderNo: options.id
				}
			).then(ress => {
				// console.log(res.data)
				if (ress.code == 200) {
					that.wul = ress.data;
					if (ress.data.nu.substr(0, 2) == "DE") {
						that.DE = false
						that.getToken()
					}else{
						that.DE = true			}
				}
			});

		},
		methods: {
			getToken() {
				let that = this
				uni.request({
					url: "http://116.52.174.53/SCM.TMS7.WebApi/Oauth/GetToken?apikey=91297820B7C042059FE4502726C47852",
					data: {},
					method: "GET",
					header: {
						"content-type": "application/json;charset=UTF-8"
					},
					success: function(result) {
						that.getpoint(result.data.token)
					},
					fail: function(e) {

					}
				})
			},
			getpoint(token) {
				let that = this
				let datas = {
					"Search": {
						"QueryModel": {
							"Items": [{
								"Field": "C_ORDER_NO",
								"Method": "Equal",
								"Value": that.wul.nu
							}]
						},
						"PageInfo": {
							"CurrentPage": "1",
							"PageSize": "10"
						}
					},
					"token": token
				}
				uni.request({
					url: "http://116.52.174.53/SCM.TMS7.WebApi/Order/GetOrderListByPage",
					data:datas,
					method: "post",
					header: {
						"content-type": "application/json;charset=UTF-8"
					},
					success: function(res) {
						console.log(res)
						let gid = window.btoa(res.data.data.list[0].ORDER_GID)
						let tokens = window.btoa(token)
						that.orderUrl = `http://116.52.174.53/SCM.TMS7.WebUI/OrderInfo/GetOrderByOauthEncrypt?orderGID=${gid}&token=${tokens}`
						console.log(that.orderUrl)
					},
					fail: function(e) {

					}
				})

			}
		}


	}
</script>

<style scoped>
	.arl {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(77, 77, 77, 1);
		margin-top: 55rpx;
		position: relative;
		z-index: 10;
	}

	.arl .nse {
		display: inline-block;
		width: calc(100% - 62rpx);
		vertical-align: middle;
	}

	.arl .nse .ltime {
		padding-left: 15rpx;
		padding-top: 15rpx;
	}

	.arl text {
		display: inline-block;
		width: 34rpx;
		height: 34rpx;
		background: rgba(196, 196, 196, 1);
		border-radius: 50%;
		font-size: 18rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 34rpx;
		text-align: center;
		margin-right: 23rpx;
		vertical-align: middle;
	}

	.arl .ds {
		width: 7rpx;
		height: 7rpx;
		background: rgba(196, 196, 196, 1);
		border-radius: 50%;
		margin-left: 15rpx;
		margin-right: 36rpx;
	}

	.alb {
		width: 90%;
		margin: auto;
		position: relative;
	}

	.alb .xs {
		width: 1px;
		height: calc(100% - 45rpx);
		background: rgba(211, 211, 211, 1);
		position: absolute;
		top: 34rpx;
		left: 17rpx;
		z-index: 5;
	}

	.arrs {
		background: #fff;
		padding-top: 23rpx;
		padding-bottom: 78rpx;
		margin-top: 4rpx;

	}

	.both {
		display: block;
		clear: both;
	}

	.tgbox {
		/* width: 455rpx; */
		position: relative;
		text-align: center;
		display: flex;
	}

	.tgbox .x {
		display: block;
		width: 460rpx;
		height: 1px;
		background: rgba(207, 207, 207, 1);
		position: absolute;
		top: calc(50% - 3rpx);
		margin: auto;
		left: 0;
		right: 0;
		z-index: 5;
	}

	.tg {
		display: inline-block;
		flex: 1;
		/* width: 64rpx; */
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(115, 115, 115, 1);
		text-align: center;
		position: relative;
		z-index: 10;
		vertical-align: top;
	}

	.tg .d {
		width: 18rpx;
		height: 18rpx;
		background: rgba(222, 222, 222, 1);
		border-radius: 50%;
		margin: auto;
		margin-top: 12rpx;
		margin-bottom: 12rpx;
	}

	.tg .names image {
		display: none;
	}

	.active .names {
		position: relative;
		left: 0;
		right: 0;
		margin: auto;

	}

	.active {
		color: rgba(240, 64, 111, 1);
	}

	.active .d {
		background: rgba(240, 64, 111, 1);
	}

	.active .names text {
		position: relative;
		z-index: 15;
		color: #fff;
		top: -12rpx;
	}

	.active .names image {
		display: block;
		position: absolute;
		width: 92rpx;
		height: 42rpx;
		margin: auto;
		top: -15rpx;
		left: 0;
		right: 0;
		z-index: 10;
	}

	.bottom {
		width: 679rpx;
		margin: auto;
		padding-top: 68rpx;
	}

	.tiam {

		background: #fff;
		padding-bottom: 50rpx;
		padding-top: 50rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.msg {
		width: 679rpx;
		height: 126rpx;
		background: rgba(255, 255, 255, 1);
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		margin-top: 63rpx;
		padding: 30rpx;

	}

	.msg .p {
		width: 50%;
		float: left;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	uni-page-body {
		height: 100%;
	}

	.mons {
		background: #EEEEEE;
		min-height: 100%;
	}

	.top {
		background: url(../../static/img/3/ppbac.png) no-repeat;
		background-size: 100% 100%;
		padding-top: 65rpx;
		padding-bottom: 125rpx;
		position: relative;
	}

	.top .bac {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 5;
	}

	.head {
		width: 107rpx;
		height: 107rpx;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(218, 218, 218, 1);
		border-radius: 10rpx;
		margin: auto;
		overflow: hidden;
	}

	.head image {
		display: block;
		width: 97rpx;
		height: 97rpx;
		margin: auto;
		margin-top: 5rpx;
	}

	.name {
		text-align: center;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin-top: 17rpx;
	}

	.mo {
		position: relative;
		z-index: 10;
	}
	.webview{
		top: 440upx;
	}
</style>
